<template>
  <div class="login-log-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onCustomSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menuLeft">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="onAdd()">新建</el-button>
          <el-button :disabled="selection.length <= 0" size="small" icon="el-icon-delete" @click="onBatchDeleteClick">
            批量删除
          </el-button>
          <el-button type="primary" size="small" :disabled="selection.length <= 0" @click="onActive('1')"
            >启用</el-button
          >
          <el-button size="small" :disabled="selection.length <= 0" @click="onActive('0')">停用</el-button>
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="goDetail(row)">详情</el-button>
          <el-button type="text" size="small" @click="goEdit(row)">编辑</el-button>
          <el-button size="small" type="text" @click="onDelete(row)"> 删除 </el-button>
        </template>
        <template slot="status" slot-scope="{ row }">
          <el-dropdown trigger="click">
            <span :style="statusMap[row.$status]" class="status-tag"
              >{{ row.$status }}
              <i class="el-icon-arrow-down" style="margin-left: 8px"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in ['启用', '停用']" :key="item" @click.native="changeStatus(item, row)">
                <span :style="statusMap[item]" class="status-tag">{{ item }} </span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </avue-crud>
    </de-container>
  </div>
</template>
<script>
import { warningPage, warningChangeStatus, warningRemove } from '@/api/warning'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import { activeStatus } from '@/utils/color'
import moment from 'moment'
const DEFAULT_LIST_MAP_FUNC = (item) => {
  const ret = item

  return ret
}
const DEFAULT_EDIT_MAP_FUNC = (item) => {
  const ret = item
  item.switching = false

  return ret
}

export default {
  name: 'WarningList',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      statusMap: activeStatus,
      moment,
      listApi: warningPage,
      deleteApi: warningRemove,
      batchDeleteApi: warningRemove,
      listMapFunc: DEFAULT_LIST_MAP_FUNC,
      editMapFunc: DEFAULT_EDIT_MAP_FUNC,
      tableOption: {
        menuWidth: 320,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: true,
        index: true,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        labelSuffix: ' ',
        column: [
          {
            label: '预警名称',
            prop: 'warningName',
            search: true,
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '预警类型',
            search: true,
            prop: 'warningType',
            align: 'left',
            dicData: [
              { label: '指标预警', value: '指标预警' },
              { label: '目标预警', value: '目标预警' },
              { label: '综合预警', value: '综合预警' },
            ],
            // hide: true,
            type: 'select',
            span: 12,
          },

          {
            label: '状态',
            prop: 'status',
            span: 12,
            align: 'left',
            search: true,
            type: 'select',
            overHidden: true,
            dicData: [
              { label: '停用', value: '0' },
              { label: '启用', value: '1' },
            ],
          },
          {
            label: '预警描述',
            prop: 'warningDesc',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '责任部门',
            prop: 'responsibleDeptId',
            type: 'tree',
            props: {
              label: 'name',
              value: 'deptId',
            },
            dicUrl: '/api/dept/tree',
            dicMethod: 'post',
            dicQuery: {},
            // search: true,
            rules: [{ required: true, message: '请选择责任部门' }],
            addDisabled: false,
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '责任人',
            prop: 'responsibleUserId',
            type: 'select',
            span: 12,
            rules: [{ required: true, message: '请选择责任人' }],
            dicUrl: '/api/user/userGrid/1/999',
            props: {
              label: 'nickName',
              value: 'userId',
            },
            dicMethod: 'post',
            dicFormatter: (res) => res.listObject,
          },
        ],
      },
      currentId: '',
      isDetail: false,
    }
  },
  computed: {
    targetType() {
      return this.$route.path === '/aim/group-aim-list' ? '0' : '1'
    },
  },
  activated() {
    this.onCustomSearchReset()
  },
  methods: {
    goDetail(row) {
      this.$router.push(`/${row.id}/warning-detail`)
      // this.currentId = row.id
      // this.isDetail = true
    },
    goEdit(row) {
      this.$router.push(`/${row.id}/warning-edit`)
      // this.$router.push(`/redirect/aim/${row.id}/my-aim-edit`)
      // this.isDetail = false
      // this.currentId = row.id
    },
    onCustomSearchReset() {
      this.onSearchReset()
    },
    onAdd(row) {
      this.$router.push('/warning-add')
      // if (typeof parentId !== 'string') this.$router.push('/redirect/aim/my-aim-add')
      // else this.$router.push({ path: '/redirect/aim/my-aim-add', query: { parentId } })
      // this.isDetail = false
      // this.currentId = ''
    },
    onDelete(row) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          warningRemove([row]).then((res) => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '删除成功',
              })
              this.onSearchReset()
            } else {
              this.$message({
                type: 'error',
                message: res.message,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    changeStatus(status, item) {
      item.status = status
      console.log(status, item)
      status = status === '停用' ? '0' : '1'
      if (status === item.status) return
      warningChangeStatus({
        ids: [item.id],
        status,
      }).then((res) => {
        if (res.success) this.onCustomSearchReset()
      })
    },
    onActive(status) {
      let ids = this.selection.map((item) => item.id)
      warningChangeStatus({
        ids,
        status,
      }).then((res) => {
        if (res.success) this.onCustomSearchReset()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding-top: 10px;
    margin-bottom: 10px;
  }

  .el-drawer .avue-form {
    padding-top: 0;
  }
}

.status-tag {
  width: 83px;
  height: 24px;
  line-height: 22px;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
}
</style>
